<template>
  <div class="see-us">
    <h2>关注我们</h2>
    <div class="platforms-container">
      <!-- 横向排列的平台卡片 -->
      <div class="platform-card" v-for="(platform, index) in socialPlatforms" :key="index">
        <div class="platform-content">
          <i :class="['iconfont', platform.icon]"></i>
          <div class="text-content">
            <p class="platform-name">{{ platform.name }}</p>
            <div class="account-list">
              <span class="account" v-for="(account, accIndex) in platform.accounts" :key="accIndex">
                {{ account }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const socialPlatforms = [
  {
    name: "官方微博",
    icon: "icon-weibo",
    accounts: ["@哗哩哗哩智能机", "@哗哩哗哩弹幕网"],
    color: "#E6162D"
  },
  {
    name: "安卓用户讨论群",
    icon: "icon-qq",
    accounts: ["147695150", "148472853", "342220554"],
    color: "#07C160"
  },
  {
    name: "抖音",
    icon: "icon-qq",
    accounts: ["147695150", "148472853", "342220554"],
    color: "#000000"
  },
  {
    name: "小红书",
    icon: "icon-qq",
    accounts: ["14769515"],
    color: "#FF2442"
  },
  {
    name: "B站",
    icon: "icon-qq",
    accounts: ["147695150", "148472853"],
    color: "#FB7299"
  }
]
</script>

<style scoped lang="scss">
.see-us {
  width: 100%;
  padding: 40px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;

  h2 {
    width: 100px;
    border-bottom: 1px solid #f25d8e;
    padding-bottom: 10px;
    margin: 0 auto 30px;
    color: #333;
    font-size: 18px;
    text-align: center;
  }

  .platforms-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none; /* Firefox */

  }

  .platform-card {
    flex: 0 0 220px; /* 增加宽度适应新布局 */
    padding: 20px;
    background: #fff;
    border-radius: 8px;

    .platform-content {
      display: flex;
      align-items: flex-start;
      gap: 15px;

      .iconfont {
        font-size: 40px; /* 适当缩小图标 */
        color: inherit;
        margin-top: 3px; /* 微调对齐 */
      }

      .text-content {
        flex: 1;
        text-align: left;

        .platform-name {
          font-size: 16px;
          font-weight: bold;
          margin: 0 0 10px 0;
          color: inherit;
        }

        .account-list {
          display: flex;
          flex-direction: column;
          gap: 6px;

          .account {
            font-size: 13px;
            color: #666;
            line-height: 1.4;
          }
        }
      }
    }
  }

  /* 平台主题色 */
  .platform-card:nth-child(1) { color: #E6162D; }
  .platform-card:nth-child(2) { color: lightskyblue; }
  .platform-card:nth-child(3) { color: lightskyblue; }
  .platform-card:nth-child(4) { color: lightskyblue; }
  .platform-card:nth-child(5) { color: lightskyblue; }


}
</style>
